<template>
	<view>
			<image :src="imageI" mode="aspectFill" class="img">
			</image>
		<hx-navbar ref="hxnb" :config="config" style="position: absolute;top: 0;">
			<block slot="right">
				<image @click="collection()" v-if="collected == 0"
					style="justify-content: right;width: 64rpx;height: 64rpx;margin-right:30rpx;"
					src="../../static/plate/7910.png" mode="aspectFit">
				</image>
				<image @click="collect()" v-if="collected == 1"
					style="justify-content: right;width: 64rpx;height: 64rpx;margin-right:30rpx;"
					src="../../static/install/8007.png" mode="aspectFit">
				</image>
				<image style="justify-content: right;width: 64rpx;height: 64rpx;margin-right:30rpx;"
					src="../../../static/cliend/share.png" mode="aspectFit">
				</image>
			</block>
		</hx-navbar>
		<view style="background-color: #ffffff;padding: 30rpx;">
			<view style="color: #333333;font-size: 36rpx;font-weight: 700;">{{dataList.title}}</view>
			<view class="flex justify-between" style="margin-top: 30rpx;">
				<view class="flex align-center">
					<u-avatar @click="Homepage(Id,userType)" :src="dataList.userAvatar" size="50">
					</u-avatar>
					<view style="margin-left: 10rpx;">
						<view style="color: #1E1E1E;font-size: 32rpx;margin-left: 2rpx;">{{dataList.userNick}}</view>
						<image src="../../static/8267.png" mode="aspectFit" style="width: 142rpx;height: 40rpx;">
						</image>
					</view>
				</view>
				<view class="attention" v-if="concern==0" style="margin-left:50rpx;z-index: 9999;" @click="getConcern">
					关注</view>
				<view @click="sheet" v-if="concern==1" class="attention"
					style="margin-left:50rpx;color: #1E1E1EFF;background-color: #ECECECFF;">
					已关注
				</view>
			</view>
		</view>
		<view style="padding: 30rpx;">
			<view style="color: #BE4201;font-size: 24rpx;">#全屋定制#</view>
			<view style="font-size: 32rpx;color:#333333;">
				本次方案包含视觉、动效、视频等，设计说明讲解的比较多，以下设计只代表个人意见，方案如有错误之处，敬请斧正。每天下班都在争分夺秒思考和设计方案，感觉有时自己很拼。
				------本来想设计一个产品的概念视频（已经完成了几个镜头），但是由于时间关系，决定以后有机会再继续完善发布。------
			</view>
			<image :src="imageI" mode="aspectFill" style="width:690rpx;height: 516rpx;margin-top: 20rpx;">
			</image>
		</view>
		<!-- 关注弹窗 -->
		<uni-popup id="popup" ref="sheet" type="bottom" :animation="true">
			<view style="text-align: center;padding: 30rpx;background-color: #ECECECFF;" @click="cancelConcern">
				取消关注
			</view>
		</uni-popup>
		<!-- 收藏弹窗 -->
		<uni-popup id="popup" ref="collection" type="bottom" :animation="true">
			<view style="text-align: center;padding: 30rpx;background-color: #ECECECFF;" @click="uncollect">
				取消收藏
			</view>
		</uni-popup>
		<!-- 评论 -->
		<comment :name="name"></comment>
	</view>
</template>

<script>
	import comment from "@/components/comment.vue"
	export default {
		components: {
			comment
		},
		data() {
			return {
				dataList: [],
				name: {
					id: '',
					publishType: 2,
					userId: null
				},
				// 判断是否收藏
				collected: '',
				config: {
					title: '',
					color: '#fff',
					backgroundColor: [1, 'transparent'],
					border: true,
					rightSlot: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				id: '',
				publishType: '',
				concern: '',
				userType: '',
				usId: '',
				Id: '',
				imageI: ''
			}
		},
		onLoad(e) {
			this.token = this.$cache.get('token')
			if (e.id == undefined) {
				let data = JSON.parse(e.data)
				this.Id = data.dsId
				this.id = data.id
				this.publishType = data.publishType
				this.name.id = data.id
			} else {
				this.id = e.id
				this.name.id = e.id
			}
			if (this.token == null) {
				this.dataList = data
			} else {
				this.getNotes()
			}
			this.imageI = this.dataList.image.split(',')[0]
			// console.log(this.dataList.image, '嘿嘿嘿额')
			console.log(this.id, '嘿嘿嘿额')
			this.name.userId = this.$cache.get('id')
		},
		onShow() {
			this.getNotes()
		},
		methods: {
			// 点击用户名跳转个人主页
			Homepage(usId, usType) {
				console.log(usId, usType)
				this.$tools.goPageNoAuth('../decoration/homepage?Id=' + usId + '&usType=' +
					usType)
			},
			// 关注
			getConcern() {
				let data = {
					focusedId: this.usId,
					userType: this.userType,
					operation: 1
				}
				this.$api.addConcern(data).then((res) => {
					// console.log('关注', res)
					this.getNotes()
				})
			},
			sheet() {
				this.$refs.sheet.open()
			},
			// 取消关注
			cancelConcern() {
				let data = {
					focusedId: this.usId,
					userType: this.userType,
					operation: 0
				}
				this.$api.unConcern(data).then((res) => {
					// console.log('取消关注', res)
					this.$refs.sheet.close()
					this.getNotes()
				})
			},
			// 收藏
			collection() {
				let data = {
					id: this.id,
					collectType: 1,
					type: this.userType,
					status: 1
				}
				this.$api.addCollect(data).then((res) => {
					// console.log(res, '在现场咨询')
					// console.log('收藏', res)
					this.getNotes()
				})
			},
			collect() {
				this.$refs.collection.open()
			},
			// 取消收藏
			uncollect() {
				let data = {
					id: this.id,
					collectType: 1,
					status: 0
				}
				this.$api.unCollect(data).then((res) => {
					this.$refs.collection.close()
					// console.log('取消收藏', res)
					this.getNotes()
				})
			},
			getNotes() {
				let data = {
					id: this.id
				}
				if (this.publishType != undefined) {
					this.$api.notesDetail(data).then((res) => {
						// console.log(res, '顶顶顶顶')
						this.dataList = res.data.result.userArticle
						this.collected = res.data.result.count
						this.concern = res.data.result.follow
						this.usId = res.data.result.userArticle.userId
						this.userType = this.dataList.userType
						this.Id = res.data.result.userArticle.userId
						this.imageI = this.dataList.image.split(',')[0]
						console.log('详情', res)
					})
				} else {
					this.$api.notesDetails(data).then((res) => {
						// console.log(res, '顶顶顶顶1')
						this.dataList = res.data.result.designerProjectNote
						this.collected = res.data.result.count
						this.usId = res.data.result.designerProjectNote.dsId
						this.concern = res.data.result.follow
						this.userType = res.data.result.userType
						this.Id = res.data.result.designerProjectNote.dsId
						this.imageI = this.dataList.image.split(',')[0]
						console.log('详情1', res)
					})
				}
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.img {
		width: 750rpx;
		height: 562rpx;
		object-fit: cover;
		flex: 1;
		z-index: -1;
		position: relative;
	}

	.attention {
		color: #FFFFFF;
		color: 28rpx;
		padding: 10rpx 30rpx;
		border-radius: 8rpx;
		background: #492D22;
		width: 162rpx;
		height: 70rpx;
		line-height: 55rpx;
		text-align: center;
	}

	.aniuert {
		width: 168rpx;
		height: 72rpx;
		background: #492D22;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: 500;
		text-align: center;
		line-height: 72rpx;
	}

	.time {
		width: 134rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(30, 30, 30, 0.4);
		margin-bottom: 20rpx;
	}
</style>
